import React, { Component } from 'react';
import { Button, Col, DatePicker, Form, Row, Select, TreeSelect } from 'antd';
import moment from 'moment';

const SearchFormItem = props => {
  const { form, children, fieldName } = props;
  const { getFieldDecorator } = form;
  return getFieldDecorator(fieldName, {})(children);
};

const { RangePicker } = DatePicker;

const { Option } = Select;

@Form.create()
class SearchForm extends Component {
  constructor(props) {
    super(props);
    // 当前的年份
    const year = parseInt(moment().format('YYYY'));
    this.state = {
      expand: false,
      value: undefined,
      years: [year, year - 1, year - 2],
      dataType: [
        {
          key: 1,
          value: '初始数据',
        },
        {
          key: 2,
          value: '详情数据',
        },
      ],
      // 是否禁用city选择
      disableCitySelect: false,
    };
  }

  componentDidMount() {
    this.setDefSearchVal();
  }

  setSelectedCity = cityId => {
    const { form } = this.props;
    form.setFieldsValue({
      city_code: cityId,
    });
    this.setState({ disableCitySelect: true });
  };

  setDefSearchVal = year => {
    const { form, initialDataTable } = this.props;
    form.setFieldsValue({
      insert_datetime: this.state.years[0],
      type: initialDataTable,
    });
  };

  render() {
    const { form, cityList, districtAndStreetList } = this.props;
    const { expand, dataType } = this.state;
    return (
      <div>
        <Row gutter={16}>
          {/*<Col className="gutter-row" span={6}>*/}
          {/*  <SearchFormItem form={form} fieldName={'statistics_type'}>*/}
          {/*    <Select allowClear placeholder={'请选择统计方式'} style={{ width: '100%' }}>*/}
          {/*      <Option value={'1'}>按地区统计</Option>*/}
          {/*      <Option value={'2'}>按人数统计</Option>*/}
          {/*    </Select>*/}
          {/*  </SearchFormItem>*/}
          {/*</Col>*/}
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName={'city_code'}>
              <Select
                disabled={this.state.disableCitySelect}
                allowClear
                placeholder={'请选择城市'}
                style={{ width: '100%' }}
                onChange={this.selectedCity}
              >
                {cityList && cityList.length > 0
                  ? cityList.map((item, index) => {
                      return (
                        <Option key={index} value={item.id}>
                          {item.name}
                        </Option>
                      );
                    })
                  : null}
              </Select>
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName={'region_code'}>
              <TreeSelect
                style={{ width: '100%' }}
                value={this.state.value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={districtAndStreetList}
                placeholder="请选择区县街道"
                allowClear
                onChange={this.selectedDistrictAndStreet}
              />
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName={'type'}>
              <Select placeholder={'请选择数据类型'} style={{ width: '100%' }}>
                {dataType && dataType.length > 0
                  ? dataType.map((item, index) => {
                      return (
                        <Option key={index} value={item.key}>
                          {item.value}
                        </Option>
                      );
                    })
                  : null}
              </Select>
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName={'insert_datetime'}>
              <Select allowClear placeholder={'请选择筛查年度'} style={{ width: '100%' }}>
                {this.state.years.map((item, index) => {
                  return (
                    <Option value={item} key={index}>
                      {item}年
                    </Option>
                  );
                })}
              </Select>
            </SearchFormItem>
          </Col>
        </Row>
        <Row gutter={16} style={{ marginTop: '8px', display: expand ? 'block' : 'none' }}>
          {/*<Col className="gutter-row" span={6}>*/}
          {/*  <SearchFormItem form={form} fieldName={'search_year'}>*/}
          {/*    <Select allowClear placeholder={'请选择筛查年度'} style={{ width: '100%' }}>*/}
          {/*      <Option value={'1'}>2020</Option>*/}
          {/*      <Option value={'2'}>2021</Option>*/}
          {/*      <Option value={'3'}>2022</Option>*/}
          {/*    </Select>*/}
          {/*  </SearchFormItem>*/}
          {/*</Col>*/}
          {/*<Col className="gutter-row" span={6}>*/}
          {/*  <SearchFormItem form={form} fieldName={'njzl_time'}>*/}
          {/*    <RangePicker*/}
          {/*      placeholder={['内镜诊疗开始', '内镜诊疗结束']}*/}
          {/*      style={{ width: '100%' }}*/}
          {/*    />*/}
          {/*  </SearchFormItem>*/}
          {/*</Col>*/}
          {/*<Col className="gutter-row" span={6}>*/}
          {/*  <SearchFormItem form={form} fieldName={'insert_datetime'}>*/}
          {/*    <RangePicker*/}
          {/*      placeholder={['创建数据开始', '创建数据结束']}*/}
          {/*      style={{ width: '100%' }}*/}
          {/*    />*/}
          {/*  </SearchFormItem>*/}
          {/*</Col>*/}
        </Row>

        <Row>
          <Col span={24} style={{ textAlign: 'right', marginTop: '8px' }}>
            <Button type="primary" onClick={this.handleSearchClick}>
              查询
            </Button>
            <Button type="primary" style={{ marginLeft: 8 }} onClick={this.handleExportClick}>
              导出
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button>
            {/*<a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.handleToggle}>*/}
            {/*  {this.state.expand ? '折叠' : '展开'}*/}
            {/*  <Icon type={this.state.expand ? 'up' : 'down'} />*/}
            {/*</a>*/}
          </Col>
        </Row>
      </div>
    );
  }

  /**
   * 查询按钮被点击
   */
  handleSearchClick = () => {
    const { form, onSearchClick } = this.props;
    const data = form.getFieldsValue();
    if (onSearchClick) {
      onSearchClick(data);
    }
  };

  /**
   * 导出按钮被点击
   */
  handleExportClick = () => {
    const { form, onExportClick } = this.props;
    const data = form.getFieldsValue();
    if (onExportClick) {
      onExportClick(data);
    }
  };

  /**
   * 重置按钮被点击
   */
  handleReset = () => {
    const { form, onResetClick } = this.props;
    // form.resetFields();
    if (this.state.disableCitySelect) {
      form.resetFields(['region_code', 'type', 'insert_datetime']);
    } else {
      form.resetFields();
    }
    this.setDefSearchVal();
    if (onResetClick) {
      onResetClick();
    }
  };

  /**
   *展开与否状态切换
   */
  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  /**
   * 用户选择了省份后保存省份id
   * */
  selectedProvince = value => {
    const { form, onSelectedProvince } = this.props;
    form.resetFields('city_name');
    if (onSelectedProvince) {
      onSelectedProvince(value);
    }
  };

  /**
   * 用户选择了城市后保存城市的id
   * */
  selectedCity = value => {
    let { form, OnSelectedCity } = this.props;
    //清空选择
    form.resetFields('region_name');
    if (OnSelectedCity) {
      OnSelectedCity(value);
    }
  };

  /**
   * 用户不选择城市后，清空区域信息
   * */
  selectedDistrictAndStreet = () => {
    const { form } = this.props;
    form.resetFields('region_name');
  };
}

export default SearchForm;
